"use client";

import dynamic from "next/dynamic";
import { UserOutlined, LockOutlined } from "@ant-design/icons";

const LoginFormPage = dynamic(
  () => import("@ant-design/pro-components").then((com) => com.LoginFormPage),
  { ssr: false }
);
const ProFormText = dynamic(
  () => import("@ant-design/pro-components").then((com) => com.ProFormText),
  { ssr: false }
);
const ProFormTextPassword = dynamic(
  () =>
    import("@ant-design/pro-components").then(
      (com) => com.ProFormText.Password
    ),
  { ssr: false }
);

export default function Page() {
  return (
    <div className="h-full">
      <LoginFormPage
        title="自助终端机"
        subTitle="自助终端机后台管理系统"
      >
        <ProFormText
          name="username"
          fieldProps={{
            size: "large",
            prefix: <UserOutlined className={"prefixIcon"} />,
          }}
          placeholder={"请输入用户名"}
          rules={[
            {
              required: true,
              message: "请输入用户名!",
            },
          ]}
        />
        <ProFormTextPassword
          name="password"
          fieldProps={{
            size: "large",
            prefix: <LockOutlined className={"prefixIcon"} />,
          }}
          placeholder={"请输入密码"}
          rules={[
            {
              required: true,
              message: "请输入密码！",
            },
          ]}
        />
      </LoginFormPage>
    </div>
  );
}
